import app from '@/assets/app_app.png';
import code from '@/assets/app_code.png';
import google from '@/assets/app_google.png';
import logo from '@/assets/app_logo.png';
import { donwLoadApp, donwLoadGoogle } from '@/utils';
import { Flex } from 'antd';
import { useIntl } from 'umi';
import './index.less';
const APPImg: React.FC<{ className?: string }> = ({ className }) => {
  const intl = useIntl();
  const isEn = intl.locale == 'en-US';
  return (
    <div
      style={{
        borderRadius: 12,
        background: '#fff',
        boxShadow: ' 0px 0px 8px 6px #E3E3E399',
      }}
      className={className}
    >
      <div style={{ padding: '20px 0 3px ', textAlign: 'center' }}>
        <img src={logo} width={130} />
        <div style={{ fontSize: 19, marginTop: 2, color: '#000', fontWeight: 700 }}>
          {intl.formatMessage({ id: 'home.online' })}
        </div>
      </div>
      <div
        style={{
          color: '#fff',
          background: 'linear-gradient(180deg, #FFFFFF 10.78%, #123BA4 54.9%)',
          padding: isEn ? '13px 0 7px' : '21px 0 7px',
          textAlign: 'center',
          lineHeight: isEn ? '14px' : 'auto',
        }}
      >
        <div> {intl.formatMessage({ id: 'home.donw' })}</div>
        {isEn ? intl.formatMessage({ id: 'home.donw1' }) : null}
      </div>
      <div
        style={{
          background: 'linear-gradient(180deg, #123BA4 18%, #123BA4 100%)',
          boxShadow: '0px 4px 4px 0px #00000040',
          borderBottomRightRadius: 12,
          borderBottomLeftRadius: 12,
        }}
      >
        <div className={'appImg_bottom'} style={{ padding: '7px 0 32px  25px' }}>
          <div
            style={{
              background: '#68605D',
              padding: '5px',
              display: 'inline-block',
              marginBottom: 10,
              borderRadius: 4,
            }}
          >
            <img src={code} width={97} height={97} />

            <div
              style={{
                fontSize: 10,
                color: '#fff',
                lineHeight: '11.5px',
                marginTop: 5,
              }}
            >
              {intl.formatMessage({ id: 'home.donwload' })}
            </div>
          </div>
          <Flex gap={4}>
            <img
              style={{ cursor: 'pointer' }}
              onClick={donwLoadGoogle}
              height={16}
              width={54}
              src={google}
            />
            <img
              style={{ cursor: 'pointer' }}
              height={16}
              onClick={donwLoadApp}
              width={54}
              src={app}
            />
          </Flex>
        </div>
      </div>
      {/* <img src={logo} width={80} />
  <div style={{ margin: '20px 0', letterSpacing: 1 }}>
    <div className="problem_content_tab_word" style={{ marginBottom: 5 }}>
      {intl.formatMessage({ id: 'login.price' })}
    </div>
    <div className="problem_content_tab_word">
      {intl.formatMessage({ id: 'login.loan' })}
    </div>
  </div>
  {wordList.map((item) => {
    return (
      <Flex align="center" key={item} style={{ marginBottom: 10 }}>
        <img src={right} width={24} />
        <div style={{ color: '#333', fontWeight: 400, marginLeft: 10 }}>
          {intl.formatMessage({ id: item })}
        </div>
      </Flex>
    );
  })}
  <Button
    onClick={() => {
      history.push('/product');
    }}
    type="primary"
    style={{
      background: '#011C64',
      width: 210,
      fontSize: 16,
      height: 57,
      marginTop: 30,
    }}
  >
    {intl.formatMessage({ id: 'center.now' })}
  </Button> */}
    </div>
  );
};

export default APPImg;
